<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <style>
      *{
        margin:0;padding:0;
      }
      body {
        background-color:#525659;
      }
      iframe {
        border: none;
        width: 100%;
        overflow: hidden;
      }
      .media {
        position: absolute;
        z-index: 99;
        top:0;
        left:0;
        width:100%;
      }
    </style>
</head>

<body oncontextmenu=noMenu >
    {% if resource %}
    <a id="slideUp" style="position:absolute;top:0px;right:20px;z-index:9999999999;height:48px;width:100%;cursor: pointer;background-color:#323639;"></a>
    <a style="position:absolute;top:0px;right:20px;z-index:9999999999;width:100%;height:100%;cursor: pointer;pointer-events:none"></a>
    <a style="position:absolute;bottom:5px;right:20px;z-index:9999999999;;width:110px;height:255px;cursor: pointer;background-color:#525659;"></a>
    <a class="media" href="{{ resource.url }}"></a> 
    {% else %}
    {{error.errMsg}}
    {% endif %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://malsup.github.io/jquery.media.js"></script> 
    <script src="/public/front/js/plugins/jquery/jquery.metadata.js"></script>
    <script>
      $('a.media').media({width:'100%', height: '100%'});
      window.onload = function(){
        $('.media').height(window.innerHeight - 5);
      }
      window.onresize = function(){
        $('.media').height(window.innerHeight - 5);
      }
      setTimeout(function(){
        {# $('#slideUp').slideUp(500); #}
      },5000)
      function test(e){
        var url = $(e).attr('url');
        alert('这些项暂时不可操作哦~');
      }
      function noMenu(win){
        var wind = win || window;
        wind.event.returnValue=false
        return false;
      }
    </script>
</body>

</html>